<template>
  <header>
    <h2><van-icon name="arrow-left" @click="backindex" />即刻倾诉</h2>
  </header>
  <div class="banner-wrap">
    <img src="../assets/img/pour-img/banner@2x.png" alt="" />
  </div>
  <div class="pour-classify">
    <div class="pour-l">
      <img src="../assets/img/pour-img/icon02@2x.png" alt="" />
      <div class="info">
        <b>倾诉指南</b>
        <span>排忧疏导&emsp;隐私安全</span>
      </div>
    </div>
    <div class="pour-r">
      <img src="../assets/img/pour-img/icon03@2x.png" alt="" />
      <div class="info">
        <b>倾诉指南</b>
        <span>排忧疏导&emsp;隐私安全</span>
      </div>
    </div>
  </div>
  <!-- 筛选 -->
  <!-- 吸顶 -->
  <van-sticky :offset-top="60">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        title="排序"
        :options="option1"
        @open="sticky"
      >
        <!-- <template #title> 排序 </template> -->
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="性别">
        <div class="sex-wrap">
          性别：
          <van-radio-group v-model="radio">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="value3" title="擅长方向" :options="option3">
        <!-- <template #title> 擅长方向 </template> -->
      </van-dropdown-item>
    </van-dropdown-menu>
  </van-sticky>

  <!-- 渲染内容 -->
  <div class="render-list">
    <ul>
      <li v-for="item in consultlist.there" :key="item">
        <div class="img-wrap">
          <img :src="item.img" alt="" />
        </div>
        <div class="info-wrap">
          <p>
            {{ item.name }}
          </p>
          <p>
            <span v-for="value in item.type" :key="value">{{ value }}</span>
          </p>
          <p class="p-m">
            <span>{{ item.time }}人向她倾诉</span>
            <span>{{ item.evaluate }}接通率</span>
          </p>
          <p class="p-d">{{ item.value }}</p>
          <p>
            <b>0</b><span>/次</span> <span>原价{{ item.price }}元</span>
            <span>立减￥50.00</span>
          </p>
        </div>
        <div class="icon-wrap">
          <img
            :src="require('../assets/img/pour-img/icon05@2x(1).png')"
            alt=""
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, computed, onMounted } from "vue";
export default {
  data() {
    return {
      value1: "a",
      value2: 0,
      value3: "A",
      radio: "1",
      option1: [
        { text: "综合排序", value: "a" },
        { text: "人气从高到低", value: "b" },
        { text: "日期从新到旧", value: "c" },
      ],
      // option2: [
      //   { text: "全部商品", value: 0 },
      //   { text: "新款商品", value: 1 },
      //   { text: "活动商品", value: 2 },
      // ],
      // option3: [
      //   { text: "全部商品", value: "A" },
      //   { text: "新款商品", value: "B" },
      //   { text: "活动商品", value: "C" },
      // ],
    };
  },

  setup() {
    const store = useStore();
    const router = useRouter();
    const consultdata = () => store.dispatch("consultdata");
    const consultlist = reactive(computed(() => store.state.Home.consultlist));
    onMounted(() => {
      consultdata();
    });
    const backindex = () => {
      router.go(-1);
    };
    const sticky = () => {
      document.documentElement.scrollTop = 266;
    };
    return {
      store,
      consultlist,
      backindex,
      router,
      sticky,
    };
  },
};
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 160px;
  background: linear-gradient(to right, #3384da, #05cafb);
  color: #fff;
  /deep/.van-icon {
    // font-size: 24px;
    float: left;
    line-height: 60px;
  }
  h2 {
    width: 100%;
    height: 60px;
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    margin: 0;
    background: linear-gradient(to right, #3384da, #05cafb);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
}
.banner-wrap {
  width: 100%;
  height: 152px;
  display: flex;
  justify-content: center;
  margin-top: -76px;
  img {
    width: 352px;
    height: 100%;
  }
}
.pour-classify {
  width: 100%;
  height: 100px;
  font-size: 12px;
  color: #bcbcbc;
  background: #fafafa;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .pour-l,
  .pour-r {
    width: 168px;
    height: 68px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 37px;
      height: 37px;
    }
    .info {
      width: 110px;
      height: 37px;
      margin-left: 5px;
      b {
        display: block;
      }
    }
  }
}
.sex-wrap {
  width: 100%;
  height: 100px;
  font-size: 14px;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  .van-radio {
    float: left;
    margin-left: 20px;
  }
}
.render-list {
  ul {
    box-sizing: border-box;
    padding: 10px;
    li {
      width: 100%;
      min-height: 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
      // 图片
      .img-wrap {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      // 文字内容
      .info-wrap {
        width: 230px;
        height: 96px;
        p {
          margin: 0;
        }
        p:first-child {
          font-size: 15px;
          font-weight: 900;
          font-family: PingFang-SC-Bold;
          img {
            width: 13.5px;
            height: 13.5px;
          }
        }
        p:nth-child(2) {
          width: 100%;
          height: 16px;
          font-size: 10px;
          span {
            height: 14px;
            background: #f7f7f7;
            padding-right: 10px;
            text-align: center;
            float: left;
          }
        }
        .p-m {
          font-size: 10px;
          span {
            font-size: 9px;
            // padding-left: 15px;
            margin-right: 15px;
            float: none;
          }
        }
        .p-z {
          display: block;
          height: 16px;
          background: red;
        }
        p:last-child {
          b {
            font-size: 16px;
            color: #fd4030;
          }
          span {
            font-size: 10px;
            color: #a5a5a5;
          }
          span:nth-child(3) {
            text-decoration: line-through;
          }
          span:last-child {
            width: 63px;
            height: 14px;
            border: 1px solid #ff5a01;
            border-radius: 7px;
            font-size: 12px;
            color: #ff5a01;
            margin-left: 50px;
          }
        }
        .p-d {
          margin-top: 10px;
          font-size: 14px;
          border-top: 1px solid #efefef;
          color: #959595;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .icon-wrap {
        width: 45px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
